<template>
  <page-header :configPageHeader="configPageHeader" @pageBack="pageBack"></page-header>
  <div class="page-wrapper">
    <!-- 
			show-postal 是否显示邮政编码 
			show-delete 是否显示删除按钮
			show-set-default 是否显示默认地址栏
			detail-rows	详细地址输入框行数	number | string	1
			detail-maxlength	详细地址最大长度
			tel-maxlength	手机号最大长度
			postal-validator	邮政编码格式校验函数	string => boolean	-
			validator	自定义校验函数 (key, val) => string
			change-area	修改收件地区时触发
		-->
    <!--  name	姓名	string
					tel	手机号	string
					province	省份	string
					city	城市	string
					county	区县	string
					addressDetail	详细地址	string
					areaCode	地区编码，通过 省市区选择 获取（必填）	string
					postalCode	邮政编码	string
					isDefault	是否为默认地址 
		-->
    <van-address-edit
      :address-info="addressInfo"
      :area-list="areaList"
      tel-maxlength="11"
      show-postal
      show-delete
      show-set-default
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      @change-area="onChangeDArea"
    />
  </div>
</template>
<script lang="ts">
import PageHeader from '@comp/pageHeader/index.vue'
import { Notify } from 'vant'
import { defineComponent, reactive, computed, onBeforeMount } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { IGlobalState } from '@/store'
import * as Types from '@/store/action-types'
import { areaList } from '@vant/area-data'
import { IAddressList } from '@/typeings/address'
export default defineComponent({
  components: {
    PageHeader,
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const store = useStore<IGlobalState>()
    //头部返回
    const configPageHeader = {
      title: '收货地址列表',
      leftText: '返回',
			isUserDefined:false
    }
    // 页面 返回
    const pageBack = () => {
      router.go(-1);
			store.commit(`address/${Types.GET_ADDRESSINFO}`, {})
    }
    //获取页面addressId
    const addressId = route.query.addressId
		console.log('addressId',addressId)
    const addressInfo = reactive(computed(() => store.state.address.addressForm))

    // 修改地区
    const proviceData = reactive({ province: '', city: '', county: '', areaCode: '' })
    const onChangeDArea = (val: string) => {
      let { province, city, county, areaCode } = proviceData
      province = val[0].name
      city = val[1].name
      county = val[2].name
      areaCode = val[2].code
    }
    //新增修改保存
    const onSave = async (val: IAddressList) => {
      store
        .dispatch(`address/${addressId ? Types.EDIT_ADDRESS : Types.ADD_ADDRESS}`, val)
        .then((_res: any) => {
          Notify({ type: 'success', message: _res })
          // 登录成功后跳转之前被访问页或首页
          setTimeout(() => {
            pageBack()
          }, 1000)
        })
        .catch((_err: any) => {
          Notify({ type: 'danger', message: _err })
        })
    }
    //删除地址
    const onDelete = (val: IAddressList) => {
      let addressId = val.addressId
      store.dispatch(`address/${Types.DELETE_ADDRESS}`, { addressId }).then((_res: any) => {
				console.log(_res)
          Notify({ type: 'success', message: _res })
          // 登录成功后跳转之前被访问页或首页
          setTimeout(() => {
            pageBack()
          }, 1000)
        })
        .catch((_err: any) => {
          Notify({ type: 'danger', message: _err })
        })
    }

    onBeforeMount(async () => {
      if (addressId) {
        store.dispatch(`address/${Types.GET_ADDRESSINFO}`, { addressId })
      }
    })
    return {
      configPageHeader,
      addressInfo,
      areaList,
      pageBack,
      onSave,
      onDelete,
      onChangeDArea,
    }
  },
})
</script>
<style scoped lang="scss">
.page-wrapper {
  margin-top: 46px;
}
</style>
